<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.6.2.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<script src="../../ui/jquery.ui.resizable.js"></script>
	<script src="../../ui/jquery.ui.dialog.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#sidebar_left { float:left; width:130px;  height:1000px; } 
	#object { float: left; width: 70%; min-height: 12em; } 
	.object.custom-state-active { background: #eee; }
	.object li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
	.object li h5 { margin: 0 0 0.4em; cursor: move; }
	.object li a { float: right; }
	.object li a.ui-icon-zoomin { float: left; }
	.object li img { width: 100%; cursor: move; }

	#Toolbar { width : 200px, height:200px; background:green;}
	
	#DrawingCanvas { float:left; width:900px; height:500px;  border:solid black;}
	.movingObjAppendStyle { width:150px; height:100px;}
	</style>

	<script>
	var objCnt=0;
	$(function() {
		var $object = $( "#object" );
		$( "li", $object ).draggable({
			helper: objectHelper,
			cursor: "move"
		});
		
		function objectHelper(event){
			var movingObj = '<div id="movingObj_'+objCnt+'" class="ui-widget-content movingObjAppendStyle" ><h3 class="ui-widget-header">class</h3></div>';
			objCnt++;
			return movingObj;
		}
		
		$( "#DrawingCanvas" ).droppable({
			drop: function( event, ui ) {
				//var id = $(this).find("#"+ui.helper[0].id).end();
				//ui.helper.draggable();
				//ui.helper.resizable();
				$(this).append( ui.helper[0].outerHTML);
				$(this).find("#"+ui.helper[0].id).draggable();
				$(this).find("#"+ui.helper[0].id).resizable();
			}
		});
				
		
	});
	
	
	</script>

	
</head>
<body>

<div id="sidebar_left">
	<ul id="object" class="object ui-helper-reset ui-helper-clearfix">
		<li class="ui-widget-content ui-corner-tr">
			<h5 class="ui-widget-header">Class</h5>
		</li>
		<li class="ui-widget-content ui-corner-tr">
			<h5 class="ui-widget-header">Package</h5>
		</li>
		<li class="ui-widget-content ui-corner-tr">
			<h5 class="ui-widget-header">Interface</h5>
		</li>
		<li class="ui-widget-content ui-corner-tr">
			<h5 class="ui-widget-header">Association</h5>
		</li>
		<li class="ui-widget-content ui-corner-tr">
			<h5 class="ui-widget-header">Dependency</h5>
		</li>
		<li class="ui-widget-content ui-corner-tr">
			<h5 class="ui-widget-header">Realization</h5>
		</li>	
	</ul>
</div>

<div id="DrawingCanvas" class="ui-widget-content">
	
</div>

</html>
